<template>
	<view class="body-box">
		<SwitchPatient :fun="swit" :id='Data.id'></SwitchPatient>
		<view class="header">
			<view class="header-left" @click="resetDate"><text>近一年</text></view>
			<view class="example-body">
				<uni-datetime-picker
					v-model="Data.single"
					type="daterange"
					@maskClick="maskClick"
					@change='dateChange'
				>
					<view class="picker">
						<text>选择时间</text>
						<view class="iconfont icon-xiangxia1"></view>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="no-data"  v-if="Data.date.length==0" >
			<text>暂无数据</text>
		</view>
			<view v-else class="content-box" @click="checkFeeDetails(v.id)" v-for="v in Data.date" :key="v">
				<view class="content" >
					<view class="header-content">
						<view class="personal-information">
							<text>{{v.park}}</text>
							<view class="information">
								<text>住院人</text>
								<text>{{v.name}}</text>
							</view>
							<view class="information">
								<text>入院时间</text>
								<text>{{v.inHospitalTime}}</text>
							</view>
							<view class="information">
								<text>出院时间</text>
								<text>{{v.leaveHospitalTime}}</text>
							</view>
						</view>
						<view class="state">
							<view class=""><text>{{v.status==0?'住院中':'已出院'}}</text></view>
							<text>￥{{v.orderTotal}}</text>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import {inpatientRecordsApi} from '@/api/ViewServices'
	import {reactive,onMounted} from 'vue'
import {onLoad} from "@dcloudio/uni-app"
	
	const Data = reactive({
		single: [],
		date: '',
		id:'',
		patientId:''
						})
	let dateChange = (e) => {
		Data.single = e
		render(Data.id)
	}
	let render=(id)=>{
		inpatientRecordsApi({startTime: Data.single[0],endTime:Data.single[1],id:id}).then(({data}) => {
			Data.date = data.data
		})
	}
	let swit=(v)=>{
		Data.patientId=v.id
		render(v.id)
	}
	let checkFeeDetails = (id) => {
		uni.navigateTo({
			url: `/pages/hospitalExpense/priceDetail/priceDetail?id=${id}&patientId=${Data.patientId}`
		})
	}
	onLoad((option)=>{
		Data.id=option.id
	})
	let getDate=()=>{
		const toDate = (t) => {
		                return t.split('/').join('-')
		            } 
		let date=new Date()	
		let endTime=toDate(date.toLocaleDateString())
		let startTime=toDate(new Date(date.setFullYear(date.getFullYear()-1)).toLocaleDateString())
		Data.single.push(startTime)
		Data.single.push(endTime)
	}
	let resetDate=()=>{
		getDate()
		swit()
	}
onMounted(()=>{
	getDate()
	
})
	let maskClick = () => {}
</script>

<style scoped lang="less">
	.body-box {
		width: 750rpx;
		background-color: #fbfdff;
	}

	.content-box {
		width: 750rpx;
		height: 350rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		width: 688rpx;
		height: 320rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 2px #e0e0e0;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;

		.header-content {
			width: 630rpx;
			height: 232rpx;
			display: flex;
			justify-content: space-between;

			.personal-information {
				height: 222rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 30rpx;
				color: #474848;
			}

			.state {
				height: 134rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;

				view {
					width: 114rpx;
					height: 40rpx;
					background-color: #c4eee5;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #03ca82;
					}
				}
			}

			.state>text {
				font-size: 36rpx;
				color: #f46363;
			}

			.information text:nth-child(1) {
				font-size: 24rpx;
				color: #bbbcbd;
			}

			.information text:nth-child(2) {
				font-size: 24rpx;
				margin-left: 20rpx;
				color: #bbbcbd;
			}
		}
	}

	.header {
		width: 688rpx;
		height: 72rpx;
		padding: 26rpx 30rpx 12rpx 30rpx;
		display: flex;

		.header-left {
			width: 130rpx;
			height: 52rpx;
			background-color: #006eff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				color: white;
				font-size: 26rpx;
			}
		}

		.picker {
			width: 180rpx;
			height: 52rpx;
			margin-left: 36rpx;
			background-color: #e4f0ff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #4294ff;

			.iconfont {
				font-size: 20rpx;
				margin-left: 12rpx;
			}
		}
	}
	.no-data{
		display: flex;
		justify-content: center;
		margin: 200rpx 100rpx;
		font-size: 40rpx;
	}
</style>
